<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    p{
        display: inline;
    }

</style>
<body>
    <h2>今日新闻</h2>
    <input type="text" id="text"> <button id="btn">发布新闻</button>
    <ul class="list-new">
        <li>
            <p>吾之所念皆星河!</p><span>删除</span>
        </li>
        <li>
            <p>吾之所念皆星河!</p><span>删除</span>
        </li>
        <li>
            <p>吾之所念皆星河!</p><span>删除</span>
        </li>
    </ul>
</body>
<script>
    // 获取元素 注册事件
    var listnew = document.querySelector('.list-new');
    var text = document.getElementById('text');
    var btn = document.getElementById('btn');
    // 封装函数
    function Makyhtml(){
        // 判断输入框是否为空
        if(text.value.trim().length == 0){
            alert('请输入内容!')
            text.value = '';
            return;
        }
         // 获取到输入框的内容
         var content = text.value;
        // 创建元素的几种方法
        // 1. 父元素.innerHTML = '新的元素结构' 这个方法会覆盖之前的元素
        // 2. document.createElement('新的元素结构') 这个方法创建元素之后会将新元素放到最后
        var li = document.createElement('li');
        li.innerHTML = '<p>' + content + '</p><span>删除</span>';
        // 将新创建的元素放到最后的用法 父元素.appendChild(新创建的子元素)
        // listnew.appendChild(li);
        // 将元素放到最前面的用法 父元素.insertBefore(新创建的子元素,listnew.children[0])
        listnew.insertBefore(li, listnew.children[0]);
        text.value = '';
        delEvent();
    }
    function delEvent(){
        var delbtn = document.querySelectorAll('.list-new span')
        for (let i = 0; i < delbtn.length; i++) {
        delbtn[i].onclick = function () {
            let li = this.parentNode;
            listnew.removeChild(li);
        }
    }
    }
    btn.onclick = function () {
        Makyhtml();
    }    
    // 键盘事件 点击回车发布 获取事件源 事件源 event 是一个参数 监听事件发生
    text.onkeyup = function (e) {
        // console.log(e);
        // 如果同时按下 Ctrl 跟 回车键 就发布
        if (e.ctrlKey && e.keyCode === 13) {
            Makyhtml();
        }
    }
</script>

</html>